---
title: "Next.js + Vercel"
sidebarTitle: "Introduction"
description: "Build and deploy a Stagehand‑powered Next.js app to Vercel"
---
import { V3Banner } from '/snippets/v3-banner.mdx';

<V3Banner />


## Overview

The Stagehand + Next.js Quickstart is a production‑ready template that pairs Stagehand's AI browser automation with a modern Next.js app, deployable in one click on Vercel.

<CardGroup cols={3}>
  <Card title="Deploy Template" icon="rocket" href="https://vercel.com/templates/ai/stagehand-next-js-quickstart">
    One‑click deploy to Vercel with environment setup
  </Card>

  <Card title="Live Demo" icon="globe" href="https://stagehand-nextjs-quickstart.vercel.app">
    See the deployed template in action
  </Card>

  <Card title="Source Code" icon="github" href="https://github.com/browserbase/stagehand-nextjs-quickstart">
    Browse the repository on GitHub (Stagehand v2)
  </Card>
</CardGroup>

## What you get

<CardGroup cols={2}>
  <Card title="App Router project" icon="browser">
    Next.js App Router scaffold with Tailwind styling
  </Card>
  <Card title="Server‑safe automation" icon="shield-check">
    Uses Browserbase for cloud browsers (works on Vercel functions)
  </Card>
  <Card title="Prewired config" icon="gear">
    `stagehand.config.ts` with model + provider switching
  </Card>
  <Card title="Automation ready" icon="robot">
    Example usage of Stagehand primitives
  </Card>
</CardGroup>

## Requirements

- **Node 18+** locally
- **Model key**: OpenAI or Anthropic (or plug a custom client)
- **Browserbase keys**: `BROWSERBASE_API_KEY` and `BROWSERBASE_PROJECT_ID` for cloud browsers

<Tip>
Local Playwright browsers are not available on Vercel. Set Stagehand to Browserbase when deploying.
</Tip>

## Links

<CardGroup cols={2}>
  <Card title="Walkthrough" icon="rocket" href="/integrations/vercel/configuration">
    Run locally and deploy to Vercel in minutes
  </Card>
</CardGroup>

